<template>
  <div class="pie-content" :style="{...magnifyFontSizeObj}">
    <div>
      <div ref="echartDom" v-bind="$attrs"></div>
    </div>
    <span>{{pieData.reason}}</span>
  </div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  pieData: {
    type: Object,
    default: () => {}
  },
  pieColor: {
    type:  String,
    default: ''
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const magnifyFontSizeObj = ref({
  '--custom-font-size-20': pxToRem(props?.dialogData?.fontSizeTimes * 20) + 'px',
  '--custom-height-600': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 'auto' : 600) + 'px',
})

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      series: [
        {
          color: [props?.pieColor, 'rgba(36,129,229,0.1)'],
          type: "pie",
          radius: [`${props?.dialogData?.fontSizeTimes === 1 ? 60 : 70}%`, `${props?.dialogData?.fontSizeTimes === 1 ? 80 : 90}%`],
          avoidLabelOverlap: false,
          emphasis: {
            disabled: true
          },
          label: {
            show: true,
            position: "center",
            formatter: `{a|${props?.pieData?.percent}%}\n{b|${props?.pieData?.sum}万}`,
            textStyle: {
              color: 'white',
              rich: {
                a: {
                  fontSize: pxToRem(25 * props?.dialogData?.fontSizeTimes),
                  fontWeight: 'bolder'
                },
                b: {
                  fontSize: pxToRem(16 * props?.dialogData?.fontSizeTimes),
                  padding: [pxToRem(5 * props?.dialogData?.fontSizeTimes), 0, 0, 0]
                }
              }
            }
          },
          data: [
            {
              value: props?.pieData?.value
            },
            {
              value: props?.pieData?.remanentValue
            },
          ],
        },
        {
          type: "pie",
          radius: [`${props?.dialogData?.fontSizeTimes === 1 ? 54 : 64}%`, `${props?.dialogData?.fontSizeTimes === 1 ? 56 : 66}%`],
          avoidLabelOverlap: false,
          itemStyle: {
            color: 'rgba(255,255,255,0.1)',
          },
          label: {
            show: false
          },
          data: [{value: 0}],
          emphasis: {
            disabled: true
          },
        },
        {
          type: "pie",
          radius: ["0%", `${props?.dialogData?.fontSizeTimes === 1 ? 50 : 60}%`],
          avoidLabelOverlap: false,
          itemStyle: {
            color: 'rgba(255,255,255,0.1)',
          },
          label: {
            show: false
          },
          data: [{value: 0}],
          emphasis: {
            disabled: true
          },
        },
      ],
    }
    option && myChart.value.setOption(option, true);
  }
}

const changeFontSize = () => { // 动态改变字体大小方法
  magnifyFontSizeObj.value = {
    '--custom-font-size-20': pxToRem(props?.dialogData?.fontSizeTimes * 20) + 'px',
    '--custom-height-600': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 'auto' : 600) + 'px',
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  changeFontSize();
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h223 {
  width:  223px;
  height: 223px;
  span {
    font-size: var(--custom-font-size-20);
    color: #FFFFFF;
    font-weight: 300;
  }
}
.dialog-h223 {
  width: 1120px;
  height: 500px;
}

.pie-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  height: var(--custom-height-600);
}
</style>